<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            /*盒子内容大小，若希望使盒子大小与盒子内容大小相同，
            那么padding，border作为盒子的一部分，就需要好好算算*/
            width:150px;
            height:150px;
            background-color: #ff6700;
        }
        .box2{
            background-color: darkred;
            /*设置外边距*/
         /*   margin-top:10px;
            margin-left:20px;
            margin-bottom:30px;
            margin-right:40px;*/
            /*margin的复合属性*/
            margin:10px 40px 30px 20px;
        }
        .box3{
            background-color: darkcyan;
        }

        span{
            /*行内元素无法设置上下边距*/
            display: block;
            margin:30px 60px;
            background-color: darkblue;
        }


    </style>
</head>
<body>
<!--并列的盒子-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<span>123</span>
<span>123</span>

</body>
</html>